<template>
  <el-backtop :right="10" :visibility-height="100">
    <ul class="RightNav">
      <el-badge :value="CarLength" class="item">
        <li @click.stop="">
          <a href="javascript:;" style="color: #c81623" @click="goCar"
            ><span class="el-icon-shopping-cart-full"></span><span>购物车</span>
          </a>
        </li>

      </el-badge>

      <li @click.stop="">
        <a href="javascript:;"><span>特色</span><span>优选</span></a>
      </li>
      <li @click.stop="">
        <a href="javascript:;"><span>频道</span><span>广场</span></a>
      </li>
      <li @click.stop="">
        <a href="javascript:;"><span>为你</span><span>推荐</span></a>
      </li>
      <li @click.stop="">
        <a href="javascript:;"
          ><span class="el-icon-headset"></span><span>客服</span></a
        >
      </li>
      <li @click.stop="">
        <a href="javascript:;"
          ><span class="el-icon-edit-outline"></span><span>反馈</span></a
        >
      </li>
      <li>
        <a href="javascript:;" style="color: #c81623"
          ><span class="el-icon-arrow-up" style="font-size: 20px"></span
          ><span>顶部</span></a
        >
      </li>
    </ul>
    <div class="test">{{a}}</div>
  </el-backtop>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      CarLength: 0,
      a: 0
    }
  },
  methods: {
    add () {
      this.a++
    },
    goCar () {
      this.$router.push({
        name: 'shoppingCar'
      })
    }
  },
  watch: {
    a: {
      deep: true,
      handler (newval, oldval) {
        setTimeout(() => {
          this.$store.dispatch('shoppingCarAbout/getShopCar').then((result) => {
            this.CarLength = this.$store.state.shoppingCarAbout.ShoppingCar.data.length
          })
        }, 300)
      }
    }
  },
  computed: {
    ...mapState('shoppingCarAbout', ['ShoppingCar'])
  },
  mounted () {
    this.$store.dispatch('shoppingCarAbout/getShopCar').then((result) => {
      if (this.$store.state.shoppingCarAbout.ShoppingCar.status !== 0) {
        return
      }
      // if (!this.$store.state.shoppingCarAbout.ShoppingCar) {
      //   return
      // }
      this.CarLength = this.$store.state.shoppingCarAbout.ShoppingCar.data.length
    })
  }

}
</script>

<style lang="less" scoped>
.test{
  width: 0;
  height: 0;
  overflow: hidden;
}
.el-backtop {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  height: 423px;
  width: 55px;
  border-radius: 0;

  &:hover {
    background-color: #fff;
  }
  .RightNav {
    margin: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    /deep/ .item{
      .el-badge__content{
        right: 65px!important;
      }
    }

    li {
      padding: 0px 5px;
      color: rgb(59, 59, 59) !important;
      font-size: 14px;
      transition: 0.3s all;
      &:nth-child(7) {
        border-bottom: none;
      }
      &:hover {
        background-color: #c81623;
      }
      &:hover a {
        border-bottom: 1px solid #c81623;
        color: #fff !important;
      }
      a {
        transition: 0.3s all;
        border-bottom: 0.1px solid rgb(224, 224, 224);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 60px;
      }
    }
  }
}
</style>
